<template>
  <div>
    <div class="pageheader">
      <XHeader
        :left-options="{backText:''}"
        :right-options="{showMore: isShowMoreBut}"
        @on-click-more="onHeaderMare"
        :title="xheader.title"
        class="XHeader"
      ></XHeader>
    </div>
    <div class="page">
      <div class="block" style="margin-top: 12px">
        <swiper
          class="swiper"
          :list="swipers"
          :showDescMask="false"
          auto
          dots-position="center"
          :height="'264px'"
        ></swiper>
        <div class="block" style=" padding:24px 16px;  background-color: #ffffff;">
          <div class="title">{{product.goods_name}}</div>
          <div class="subtitle">{{product.subtitle}}</div>
          <div v-if="product.other_sku" style="font-size: 13px;color: #9f8d89;margin: 10px 0 0">商品编号: {{product.other_sku}}</div>

          <div class="pricebar">
            <div class="price">
              ￥ {{product.internal_price}}
              <span class="d-price">￥{{product.reference_price}}</span>
            </div>
            <div
              class="f-price"
            >佣金: ￥{{product.distributionInfo?product.distributionInfo.distribution_amount:'0'}}
            </div>
          </div>
          <!-- <div class="coupon">
            <div class="text">优惠券：满200减50 满399-100</div>
          </div>-->
          <div class="describe">
            <div style="flex:1" class="brokerageitem">
              <div class="quantity">
                <div class="minus" @click="onMinus">-</div>
                <div class="num">{{goods_number}}</div>
                <div class="plus" @click="onPlus">+</div>
              </div>
            </div>
            <div>库存：{{product.goods_storage>0?'有货':'售罄'}}</div>
          </div>

          <!--分享类型-->
          <div class="share_link" v-if="!isSanXia">
            <div class="share_link_con" @click="share(Enum.URL_TYPE.FRIEND)"><i></i><span>分享给朋友</span></div>
            <div class="share_link_bo">|</div>
            <div class="share_link_con" @click="share(Enum.URL_TYPE.COLLEAGUE)"><i></i><span>分享给同事</span></div>
          </div>

        </div>
      </div>
      <div class="formitem" v-if="product.supplier_id==-1">
        <label class="label">地区:</label>
        <areaSelect style="flex:1" @change="onAreaSelectChange" :areavalue="addressAreas">
          <div v-if="area_info" class="picker">
            <span>{{area_info}}</span>
          </div>
          <div v-else>请选择地址</div>
        </areaSelect>
      </div>

      <div class="block">
        <div class="listitem" @click="onComment">
          <div class="text">
            好评率：
            <span class="redtext">{{rateAcclaim}}</span>
          </div>
          <div class="desc">查看全部评价</div>
        </div>
      </div>

      <mallinfo :tab="tab"></mallinfo>

      <div class="operation">
        <img style="width: 34px;margin: 0 8.5px 0 20px;" class="service" src="@/assets/img/goode_detail_home.svg"
             @click="$router.push({name: 'mall'})"/>
        <span class="goodsNumList">
          <span class="goodsNum" v-if="goodsNum">{{goodsNum}}</span>
          <img class="shopping" src="@/assets/img/ic_shopping2.png" @click="onCart"/>
        </span>
        <div class="add" @click="onAddToCart">加入购物车</div>
        <div class="shop" @click="onClearing">立即购买</div>
      </div>
    </div>
    <actionsheet v-model="ifShowMore" :menus="menus" @on-click-menu="menusFun" :show-cancel="true"></actionsheet>

    <input
      type="text"
      readonly
      class="clipBoardContent"
      id="clipBoardContent"
      v-model="clipBoardContent"
    />

    <!-- 分享指示-->
    <ShareGuide v-model="isShowShare"></ShareGuide>
  </div>
</template>

<script>
  import { share } from '@/mixin/share'
  import Product from '@/dll/product'
  import Mall from '@/dll/mall'
  import Util from '@/utils/util'
  // import WinXin from '@/dll/weixin'
  import baseUrl from '@/baseUrl'

  export default {
    name: 'mallDistributionInfo',
    mixins: [share],
    data () {
      let isShowMoreBut = Util.isWeixn()
      let isUleeCommunityAPP = Util.isUleeCommunityAPP()
      let menus = []
      if (isUleeCommunityAPP) {
        menus = [
          { label: '分享到微信', value: 'shareAppMessage' },
          { label: '分享到朋友圈', value: 'shareTimeline' }
        ]
      } else {
        menus = [{ label: '复制连接地址', value: 'copy' }]
      }
      let addressAreas = JSON.parse(localStorage.jddzqy || '[]')
      return {
        xheader: {
          title: '赚钱宝详情'
        },
        swipers: [],
        tab: [],
        tabIndex: 0,
        id: '',
        product: {},
        goods_number: 1,
        menus: menus,
        isShowMoreBut: !isShowMoreBut,
        ifShowMore: false,
        clipBoardContent: '',
        area_info: '',
        addressAreas: addressAreas,
        link: ''
      }
    },
    // 创建完成后
    created () {
      this.id = this.$route.params.id
      this.link = baseUrl.link.SHARE + this.$route.params.id
      this.init()
      this.GET_GOODS_NUM()
    },
    methods: {
      async init () {
        this.getImages()
        await this.getInfo()
        await this.getShareUrl()
      },
      onCopy () {
        this.$vux.alert.show({
          title: '提示',
          content: '复制成功，去粘贴吧！'
        })
      },
      onError () {
        this.$vux.alert.show({
          title: '提示',
          content: '复制失败，请手动复制吧！'
        })
      },
      onHeaderMare () {
        this.ifShowMore = true
      },
      // onComment () {
      //   this.$router.push({ name: 'mallComment' })
      // },
      // 减数量
      onMinus () {
        if (this.goods_number <= 1) {
        } else {
          this.goods_number = this.goods_number - 1
        }
      },
      // 加数量
      onPlus () {
        if (!this.area_info && this.product.supplier_id == -1) {
          this.$vux.alert.show({
            title: '提示',
            content: '请先选择一个地区'
          })
          return
        }
        if (this.goods_number >= this.product.goods_storage) {
          this.$vux.alert.show({
            title: '提示',
            content: '商品库存不足'
          })
        } else {
          this.goods_number = this.goods_number + 1
        }
      },
      onCart () {
        this.$router.push({ name: 'shopping' })
      },
      // 菜单回调
      /*   menusFun (key, item) {
           let fun = {
             shareAppMessage: () => {
               let config = {
                 type: 1,
                 shareTitle: this.product.goods_name,
                 shareDescr: this.product.subtitle,
                 shareThumbImage: this.product.goods_image_main,
                 shareWebPageUrl: this.clipBoardContent
                 // shareWebPageUrl: baseUrl.link.SHARE + this.$route.params.id
               }
               WinXin.ShareToWeiXin(config, () => {
               })
             },
             shareTimeline: () => {
               let config = {
                 type: 2,
                 shareTitle: this.product.goods_name,
                 shareDescr: this.product.subtitle,
                 shareThumbImage: this.product.goods_image_main,
                 shareWebPageUrl: this.clipBoardContent
                 // shareWebPageUrl: baseUrl.link.SHARE + this.$route.params.id
               }
               WinXin.ShareToWeiXin(config, () => {
               })
             },
             copy: () => {
               let input = document.getElementById('clipBoardContent')
               const range = document.createRange()
               range.selectNode(input)
               const selection = window.getSelection()
               if (selection.rangeCount > 0) {
                 selection.removeAllRanges()
               }
               selection.addRange(range)
               // input.select();
               // input.setSelectionRange(0, input.value.length);
               let isCopy = document.execCommand('copy')
               if (isCopy) {
                 this.$vux.alert.show({
                   title: '提示',
                   content: '连接已复制,去粘贴吧！'
                 })
               } else {
                 this.$vux.alert.show({
                   title: '提示',
                   content: '浏览器不支持，请手动复制。'
                 })
               }
             }
           }
           if (fun[item.value]) {
             fun[item.value]()
           }
         },
         async getShareUrl () {
           let param = {
             goods_sku: this.id
           }
           this.$vux.loading.show({
             text: '请稍后'
           })
           let res = await Mall.getShareUrl(param)
           this.$vux.loading.hide()
           if (res.code == 0) {
             this.clipBoardContent = res.data
             if (Util.isWeixn()) {
               this.updateAppMessageShareData()
             }
           } else {
             this.$vux.alert.show({
               title: '提示',
               content: res.msg
             })
           }
         }, */
      // 添加到购物车
      async onAddToCart () {
        if (this.product.goods_storage <= 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '库存不足，无法加入购物车'
          })
          return
        }
        this.$vux.loading.show({
          text: '请稍后'
        })
        let res = await Product.addToCart(this.id, this.goods_number)
        this.$vux.loading.hide()
        if (res.code == 0) {
          this.GET_GOODS_NUM()
          this.$vux.alert.show({
            title: '提示',
            content: '已加入购物车'
          })
        } else {
          this.$vux.alert.show({
            title: '提示',
            content: res.msg
          })
        }
      },
      // 结算
      onClearing () {
        if (this.product.goods_storage <= 0) {
          this.$vux.alert.show({
            title: '提示',
            content: '库存不足，无法购买。'
          })
          return
        }
        let items = []
        let product = this.product
        product.goods_number = this.goods_number
        items.push({
          goods_sku: product.goods_sku,
          goods_number: this.goods_number
        })
        this.$router.push({
          name: 'mallClearing',
          query: { items: JSON.stringify(items), if_cart: 0 }
        })
      },
      // 获取详情
      async getInfo () {
        let param = {
          goods_sku: this.id,
          distribution: 1
        }
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Product.getDiscountProductInfo(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          let product = res.data
          let tab = Util.infoTab(product)
          this.product = product
          this.xheader.title = product.goods_name
          this.tab = tab
          this.swipers = [].concat(this.swipers, {
            url: 'javascript:',
            img: product.goods_image_main
          })
          if (this.addressAreas.length) {
            this.onAreaSelectChange(this.addressAreas)
          }
        } else {
          this.$vux.confirm.show({
            title: '提示',
            content: res.msg,
            showCancelButton: false,
            onConfirm: () => {
              this.$router.back()
            }
          })
        }
      },
      // 获取图片
      async getImages () {
        let res = await Product.getDiscountProductImages(this.id)
        if (res.code == 0) {
          this.swipers = [].concat(
            this.swipers,
            res.data.map(item => {
              return {
                url: 'javascript:',
                img: item
              }
            })
          )
        }
      },
      // 更新微信分享
      /*   updateAppMessageShareData () {
           let config = {
             title: this.product.goods_name,
             desc: this.product.subtitle,
             link: this.clipBoardContent,
             // link: this.link,
             imgUrl: this.product.goods_image_main,
             success: () => {
             }
           }
           WinXin.updateAppMessageShareData(config)
         }, */
      // 区域更新
      onAreaSelectChange (detail) {
        let area_info = []
        for (var i in detail) {
          area_info.push(detail[i].area)
        }
        this.addressAreas = detail
        let province = {}
        let city = {}
        let area = {}
        let street = {}
        detail.map((item, index) => {
          if (index == 0) {
            province = item
            return
          }
          if (index == 1) {
            city = item
            return
          }
          if (index == 2) {
            area = item
            return
          }
          if (index == 3) {
            street = item
          }
        })
        this.area_code_str = `${province.id}_${city.id}_${area.id}_${street.id || 0}`
        this.area_info = area_info.join(' ')
        this.getJdInventory()
      },
      // 获取JD库存
      async getJdInventory () {
        let param = {
          skuStr: [],
          code: this.area_code_str,
          area: this.area_info
        }

        param.skuStr.push({
          skuId: this.product.other_sku,
          num: this.goods_number
        })

        param.skuStr = JSON.stringify(param.skuStr)
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Mall.getJdInventory(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          if (res.data[0].stockStateDesc == '有货') {
            this.product.goods_storage = 9999
          } else {
            this.product.goods_storage = 0
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .page {
    padding-bottom: 49px;
  }

  .swiper {
    height: 264px;
    background-color: #fff;
  }

  .slide-image {
    height: 264px;
  }

  .title {
    font-size: 16px;
    color: #351009;
    line-height: 22px;
  }

  .subtitle {
    font-size: 14px;
    color: #d8d0ce;
    line-height: 20px;
  }

  .pricebar {
    margin-top: 24px;
    display: flex;
    align-items: center;
  }

  .pricebar .price {
    flex: 1;
    font-size: 20px;
    color: #ae2309;
    line-height: 28px;
  }

  .pricebar .n-price {
    font-size: 12px;
  }

  .pricebar .d-price {
    font-size: 14px;
    color: #d1c8c6;
    line-height: 20px;
    text-decoration: line-through;
  }

  .pricebar .f-price {
    font-size: 20px;
    color: #ae2309;
    line-height: 28px;
  }

  .coupon {
    margin-top: 8px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #fff;
  }

  .coupon::before {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #351009;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    top: -2px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -4px;
  }

  .coupon .text {
    font-size: 12px;
    color: #9f8d89;
    line-height: 17px;
  }

  .describe {
    display: flex;
    margin-top: 8px;
    font-size: 12px;
    color: #9f8d89;
    line-height: 17px;
    align-items: center;
  }

  .listitem {
    display: flex;
    align-items: center;
    height: 48px;
    box-sizing: border-box;
    padding: 14px 16px;
    padding-right: 36px;
    position: relative;
    background-color: #fff;
  }

  .listitem::before {
    content: " ";
    display: block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #351009;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    right: 0;
    margin-right: 16px;
  }

  .listitem .text {
    flex: 1;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
  }

  .listitem .desc {
    font-size: 15px;
    color: #351009;
    line-height: 21px;
  }

  .redtext {
    color: #ae2309;
  }

  .infotab {
    border-top: 1px solid #fbf8f7;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    padding-left: 12px;
    padding-right: 12px;
    height: 45px;
    z-index: 9999;
    background-color: #fff;
  }

  .infotab > .item {
    flex: 1;
    height: 100%;
    display: block;
    line-height: 45px;
    font-size: 14px;
    color: #351009;
    text-align: center;
    position: relative;
  }

  .infotab > .item.active {
    color: #ae2309;
  }

  .infotab > .item.active::after {
    position: absolute;
    content: "";
    width: 60%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 1px;
    background: #b0290f;
  }

  .operation {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    height: 49px;
    align-items: center;
  }

  .operation .service {
    width: 49px;
    height: 49px;
    margin-left: 12px;
    display: block;
  }

  .operation .shopping {
    width: 49px;
    height: 49px;
    display: block;
    margin-right: 12px;
  }

  .operation .add {
    flex: 1;
    font-size: 14px;
    color: #fff;
    height: 49px;
    line-height: 49px;
    text-align: center;
    background-color: #eca13e;
  }

  .operation .shop {
    flex: 1;
    font-size: 14px;
    color: #fff;
    height: 49px;
    line-height: 49px;
    text-align: center;
    background-color: #ae2309;
  }

  .brokerageitem .quantity {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .brokerageitem .quantity .plus {
    display: block;
    width: 24px;
    height: 24px;
  }

  .brokerageitem .quantity .minus,
  .brokerageitem .quantity .plus {
    display: block;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    border: 1px solid #d4d4d4;
  }

  .brokerageitem .quantity .num {
    display: block;
    width: 40px;
    height: 24px;
    line-height: 24px;
    font-size: 18px;
    color: #ae2309;
    text-align: center;
  }

  .formitem {
    background-color: #fff;
    display: flex;
    padding: 14px 24px;
    box-sizing: border-box;
    align-items: center;
  }

  .formitem .label {
    display: block;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
    width: 96px;
  }

  .formitem input,
  .formitem picker,
  .placeholder,
  .formitem areaSelect {
    flex: 1;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
  }

  .formitem .picker {
    position: relative;
    font-size: 15px;
    color: #9f8d89;
    line-height: 21px;
    min-height: 21px;
    display: block;
    box-sizing: border-box;
    padding-right: 15px;
  }

  .formitem .picker:before {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #351009;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    top: -2px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -4px;
  }
</style>
